<template>
  <div class="main-info" ref="main">
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: "MainArea",
    mounted() {
      let that = this
      setMainDivSize(that)
      window.onresize = () => {
        setMainDivSize(that)
      }
    }
  }

  function setMainDivSize(that) {
    let m = that.$refs.main.offsetTop
    let b = window.innerHeight
    that.$refs.main.style['min-height'] = (b - m - 20) + 'px'
    document.getElementById('app').style.height = window.innerHeight + 'px';
  }
</script>

<style scoped>
  .main-info {
    background: #fff;
    margin: 25px auto 0;
  }
</style>
